<!-- 导航栏布局 -->
<nav class="navbar navbar-expand-md navbar-dark">
  <!-- 导航栏logo -->
  <a class="navbar-brand" href="#">zzBlog</a>
  <!-- 小屏设备响应式菜单按钮 -->
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#collapsibleNavbar"> <span class="navbar-toggler-icon"></span> </button>
  <!-- 菜单布局 -->
  <div class="collapse navbar-collapse justify-content-end" id="collapsibleNavbar">
    <ul class="navbar-nav"
        *ngFor="let nav of navs">
      <li *ngIf="!nav.items; else elseBlock"
        class="nav-item"><a [ngClass]="{'nav-link': true, active: nav.tag === currentNav.tag}" href="/{{nav.tag}}">{{nav.name}}</a>
      </li>
      <ng-template #elseBlock>
        <li class="nav-item dropdown">
          <a class="nav-link dropdown-toggle" id="navbardrop" data-toggle="dropdown">{{nav.name}}</a>
          <div class="dropdown-menu">
            <a class="dropdown-item" *ngFor="let item of nav.items" href="/{{item.tag}}">{{item.name}}</a>
          </div>
        </li>
      </ng-template>
    </ul>
  </div>
</nav>
<br>
<div class="container">
  <div>
    <form class="form-inline float-right">
      <input class="form-control" type="text" placeholder="搜你所想">
      <button class="btn btn-success" type="button">搜索</button>
    </form>
  </div>
  <!-- 分割线 -->
  <hr color="white"/>
  <!-- 背景音乐 -->
  <iframe class="cloud-music"
          frameborder="no"
          marginwidth="0"
          marginheight="0"
          height=86
          src="https://music.163.com/outchain/player?type=2&id=26060065&auto=0&height=66"></iframe>
  <div *ngIf="hitokoto" class="hikotoko">
    <p class="bracket-left">『</p>
    <p class="hitokoto-content">{{hitokoto.hitokoto}}</p>
    <p class="bracket-right">』</p>
    <p class="hitokoto-from">——（{{hitokoto.text}}）「{{hitokoto.from}}」</p>
  </div>

  <!-- 正文
	正文是转载的一篇关于kotlin单例模式的文章，内容样式在css文件里
	在正文编辑过程中，主要很麻烦的地方是代码片段
	同时它也是篇幅最长的地方，基本上每一个单词都是通过span修饰的
	仿照相关博客网站编辑，让代码更具有可读性
	以下文章部分不再注释。。（太多了） -->
  <router-outlet></router-outlet>
</div>
<!-- 分割线 -->
<footer class="footer">
  <hr color="white"/>
  <div class="container">
    <!-- copyright -->
    <p>Copyright 2018 @zzzz1997 <a class="link" href="https://github.com/zzzz1997/">Github</a>. | 蜀ICP备 18012900号</p>
  </div>
</footer>
